<template>
  <div class="ds_curmbs_wapper">
    <!-- 左侧按钮 -->
    <div class="ds_curmbs_l_btn" @click="handleTurnLeft">
      <i class="iconfont icon-xiangzuo"></i>
    </div>
    <!-- 左侧按钮 -->
    <div class="ds_curmbs_r_btn" @click="handleTurnright">
      <i class="iconfont icon-xiangyou"></i>
    </div>
    <!-- 显示的导航 -->
    <div class="ds_curmbs">
      <div ref="ds_curmbs_content" class="ds_curmbs_content">
        <ul class="ds_curmbs_inner">
          <li
            class="ds_curmbs_inner_item"
            v-for="(item, index) in tagList"
            :key="index"
            :class="[
              tag.value === item.value ? 'is-active' : ''
            ]"
            @click="handleOpenTag(item)"
          >
            <div class="inner_item_content">{{ item.label }}</div>
            <!-- 关闭按钮 -->
            <div v-show="tag.value === item.value" class="inner_item_icon">
              <i
                v-show="!(tag.value === website.fistPage.value && tagList.length === 1)"
                class="iconfont icon-cuowu"
                @click.stop="handleClose(item)"
              ></i>
            </div>
          </li>
        </ul>
      </div>
      <div class="ds_curmbs_ctrl" @click="handleAllClose">关闭所有</div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { getPath } from "@/util/avue.js";
export default {
  props: {
    tags: Array
  },
  data () {
    return {
      isActive: true
    };
  },
  computed: {
    ...mapGetters(["tagWel", "tagList", "tag", "website"]),
    ...mapState({
      showTag: state => state.common.showTag
    }),
    tagLen () {
      return this.tagList.length || 0;
    }
  },
  watch: {
    tag (val, oldVal) {
      const wapper = this.$refs.ds_curmbs_content;
      // const wapperLeft = wapper.scrollLeft;
      const wapperWidth = wapper.clientWidth;
      let tagLeft = 0;
      let tagIndex = 0;

      // 获取当前的tag在tagList的位置
      this.tagList.forEach((item, index) => {
        if (item.value === this.tag.value) {
          tagIndex = index;
        }
      });

      // 当前tag距离wapper的距离
      const childre = [...wapper.children[0].children];
      childre.forEach((item, index) => {
        if (index <= tagIndex) {
          tagLeft += item.clientWidth;
        }
      });

      // 设置tag的位置在盒子的中间位置
      this.$refs.ds_curmbs_content.scrollLeft = tagLeft - wapperWidth / 2;
    }
  },
  methods: {
    // 点击tab跳转
    handleOpenTag (item) {
      this.filterAndJump2Path(item);
    },

    // 关闭当前的tab，打开前一个标签
    handleClose (item) {
      let { tag, key } = this.filterFindTag(item.value);
      // 删除当前标签
      this.$store.commit("DEL_TAG", item);

      if (tag.value === this.tag.value) {
        tag = this.tagList[key === 0 ? key : key - 1];
        // 如果关闭的按钮是最后一个，那么关闭按钮之后就跳转到主页
        if (tag) {
          this.handleOpenTag(tag);
        } else {
          this.handleAllClose();
        }
      }
    },

    // 关闭全部的tab
    handleAllClose () {
      this.$store.commit("DEL_ALL_TAG");
      this.$router.push(this.website.fistPage.value);
    },

    // table右移动
    handleTurnright () {
      this.$refs.ds_curmbs_content.scrollLeft += 200;
    },

    // table左移动
    handleTurnLeft () {
      this.$refs.ds_curmbs_content.scrollLeft -= 200;
    },

    // 过滤跳转，确定真正的跳转路径（iframe或者是本地路径）
    filterAndJump2Path (item) {
      this.$router.push({
        path: getPath({
          name: item.label,
          src: item.value
        })
      });
    },

    // 查找当前tag在tagList的index位置
    filterFindTag (value) {
      let tag, key;
      this.tagList.map((item, index) => {
        if (item.value === value) {
          tag = item;
          key = index;
        }
      });
      return { tag: tag, key: key };
    }
  }
};
</script>

<style lang="less" scoped>
.ds_curmbs_wapper {
  position: relative;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  //按钮
  .ds_curmbs_l_btn,
  .ds_curmbs_r_btn {
    position: absolute;
    top: 0;
    width: 20px;
    height: 100%;
    text-align: center;
    line-height: 30px;
    color: #999999;
    background-color: #f8f8f8;
    cursor: pointer;
  }
  // 左侧按钮
  .ds_curmbs_l_btn {
    left: 0;
  }
  // 右侧按钮
  .ds_curmbs_r_btn {
    right: 0;
  }

  .ds_curmbs {
    position: relative;
    padding-right: 70px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ds_curmbs_content {
      height: 47px;
      overflow-y: hidden;
      overflow-x: auto;
      .ds_curmbs_inner {
        white-space: nowrap;
        .ds_curmbs_inner_item {
          position: relative;
          display: inline-block;
          padding: 0 24px;
          height: 30px;
          line-height: 30px;
          color: @fColor1;
          .inner_item_content {
            display: inline-block;
          }
          .inner_item_icon {
            display: inline-block;
            padding-left: 12px;
            i {
              color: @fColor1;
              font-size: 12px;
            }
            &:hover {
              i::before {
                border-radius: 50%;
                .color();
                background-color: #ddd;
              }
            }
          }
          &.is-active {
            .color();
          }
          &::after {
            content: "";
            position: absolute;
            top: 7px;
            right: 0;
            border-right: 1px solid #ebe9f3;
            width: 1px;
            height: 16px;
          }
        }
      }
    }
    .ds_curmbs_ctrl {
      position: absolute;
      top: 0;
      right: 0;
      width: 70px;
      height: 100%;
      .color();
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }
  }
}
</style>
